<script>
import UInput from "../../uni_modules/uview-ui/components/u--input/u--input.vue";
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
import UIcon from "../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
import {request} from "../../static/core/request";
import UCellGroup from "../../uni_modules/uview-ui/components/u-cell-group/u-cell-group.vue";
import UPopup from "../../uni_modules/uview-ui/components/u-popup/u-popup.vue";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image.vue";
export default {
  name: "index",
  components: {UImage, UCellGroup, UIcon, UButton, UInput, UPopup},
  data() {
    return {
      value: '',
      curType: 1,
      list: [
        { name: "查条形码", value: 1},
        { name: "查商品名称", value: 2 },
      ],
      goodsList: [],
      isFocus: false,
      isFirstSearch: true,
      showVCode: false,
      apiType: 1,
      captcha: '',
      uuid: '',
      loading: false,
    };
  },
  onLoad() {
    // this.search();
    this.createUUID();
  },
  methods: {
    tabChange(item) {
      console.log(item);
      this.curType = item.value;
      this.value = '';
    },

    async search() {
      let result = null;
      if (this.apiType === 1 || this.curType === 2) {
        const res = await request({
          url: '/erp/goods/queryByGtinOrName',
          method: 'get',
          params: {
            type: this.curType,
            key: this.value,
          }
        })
        result = res.result;
        if (result.length === 0) {
          this.createUUID();
          this.showVCode = true;
          return;
        }
      } else {
        const res = await request({
          url: '/erp/goods/getGsOneData',
          method: 'post',
          data: {
            "captcha": this.captcha,
            "gtin": this.value,
            "uuid": this.uuid,
          }
        });
        result = res.result;
      }
      this.goodsList = result;
      this.isFirstSearch = false;
      if (this.curType == 1 && this.goodsList.length > 0) {
        this.toDetail(this.goodsList[0])
      }
      //   /erp/goods/queryByGtinOrName
    },
    subVCode() {
      this.apiType = 2;
      this.search()
    },
    scan() {
      // 扫描条形码
      uni.scanCode({
        success: (res) => {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          this.value = res.result;
          this.search();
        }
      });
    },
    toDetail(goods) {
      // 缓存goods
      uni.setStorageSync('goods', goods);
      uni.navigateTo({
        url: `/pages/goods-detail/index?gtin=${goods.gtin}`
      });
    },
    createUUID() {
      let s = [];
      let hexDigits = "0123456789abcdef";
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
      let uuidStr = s.join("");
      this.uuid = uuidStr;
      return this.uuid;
    },
  }
}
</script>

<template>
  <view class="page" :style="{background: goodsList.length > 0 ? '#eee' : '#fff'}">
    <view class="form">
      <view>
        <u-tabs :list="list" justify="center" @click="tabChange"></u-tabs>
      </view>
      <u-cell-group :border="false">
        <u-cell :border="false">
          <u-input slot="title" clearable v-model="value" @blur="isFocus = false" @focus="isFocus = true" :placeholder="`请输入查询内容`"/>
          <view slot="value" class="cell-btn">
            <u-button type="primary" @click="scan" v-if="curType == 1">
              <u-icon name="scan" size="26" color="#fff"/>
            </u-button>
            <u-button type="primary" @click="search" v-else>搜索</u-button>
          </view>
        </u-cell>
      </u-cell-group>
    </view>
<!--    <viwe class="loading">-->
<!--      <u-loading-icon text="查询中..." mode="circle" textSize="14" size="18" vertical></u-loading-icon>-->
<!--    </viwe>-->
    <view class="goods-list" v-if="goodsList.length > 0 || isFirstSearch">
      <view class="goods"  v-for="goods in goodsList" :key="goods" @click="toDetail(goods)">
        <view class="img-wrap">
          <image :src="goods.pictureFilename" style="width: 100%;height: 150px" mode="aspectFit"/>
        </view>
        <view class="title">{{ goods.goodsName }}</view>
        <view>
          <view class="kv">
            <view class="key">商品条码:</view>
            <view class="value">{{ goods.gtin }}</view>
          </view>
          <view class="kv">
            <view class="key">规格:</view>
            <view class="value">{{goods.specification}}</view>
          </view>
          <view class="kv">
            <view class="key">品牌名称:</view>
            <view class="value">{{ goods.brandcn }}</view>
          </view>
          <view class="kv">
            <view class="key">发布企业:</view>
            <view class="value">{{ goods.firmName }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="list-wrap" v-else>
      <u-empty
          mode="search"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
      >
      </u-empty>
    </view>
    <!--弹框输入验证码-->
    <u-popup :show="showVCode" mode="center">
      <view class="vcode-wrap" style="padding: 20rpx;">
        <view class="close" @click="showVCode = false">关闭</view>
        <view class="title">验证码</view>
        <view>
          <image class="code-img" mode="aspectFit" :src="`http://dynamic.gs1cn.org/office/captcha.jpg?uuid=${uuid}`"/>
          <view class="refresh" @click="createUUID()">刷新</view>
        </view>
        <view class="input-wrap">
          <u-input
              class="input"
              type="text"
              placeholder="请输入验证码"
              v-model="captcha"
          />
        </view>
        <view class="btns">
          <u-button class="btn" @click="subVCode" shape="circle" type="primary" style="margin-top: 30rpx;">提交</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style scoped lang="scss">
.page{
  background: #eee;
  height: 100vh;
}
.form{
  padding-top: 30rpx;
  background: #fff;
  .cell-btn{
    padding-left: 15rpx;
    width: 120rpx;
  }
}
.loading{
  padding-top: 80rpx;
}
.goods{
  width: 100%;
  padding: 15px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 10rpx;
  margin: 0 20rpx 20rpx 0;
  color: #555;
  box-sizing: border-box;
  .img-wrap{
    width: 100%;
    //height: 160px;
    overflow: hidden;
    font-size: 0;
    display: block;
    img{
      width: 100%;
      height: 320rpx;
      object-fit: contain;
    }
  }
  .title{
    font-size: 28rpx;
    font-weight: bold;
    margin: 20rpx 0;
    color: #1890ff;
    margin-top: 30rpx;
    text-align: center;
  }
  .kv{
    display: flex;
    margin-bottom: 10rpx;
    .key{
      font-weight: bold;
      display: inline-block;
      width: 160rpx;
      text-align: right;
      font-size: 24rpx;
      flex-grow: 0;
    }
    .value{
      color: #666;
      font-size: 24rpx;
      padding-left: 20rpx;
      flex-grow: 0;
    }
  }
}
.list-wrap{
  margin-top: 50rpx;
}
.goods-list{
  padding: 20rpx;
}
//::v-deep{
//  .u-tabs__wrapper__nav{
//    justify-content: center;
//  }
//}
.vcode-wrap{
  background: #fff;
  border-radius: 10rpx;
  padding: 40rpx;
  padding-bottom: 50rpx;
  .close{
    text-align: right;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  .refresh{
    text-align: right;
    font-size: 24rpx;
    color: #2460ff;
  }
  .code-img{
    width: 100%;
    height: 100rpx;
  }
  .title{
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
  }
  .input-wrap{
    padding: 28rpx 0;
    .input{
      box-sizing: content-box;
      height: 28rpx;
      padding: 12rpx 0;
    }
  }
  .btns{
    margin-top: 50rpx;
    .btn{
      width: 100%;
    }
  }
}
</style>
